<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V-IF标签使用</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <p>如果今天天气好，就出去玩，如果天气不好就在家学习</p>
  <p v-if="sun">今天天气好，可以出去玩</p>
  <p v-else>天气不好在家写作业</p>

  <hr>
  <p>年龄在0-18未成年 18-30青少年 30-60中年 60+老年</p>
  <p v-if="age <18">未成年</p>
  <p v-if="age >=18 && age <30">青少年</p>
  <p v-if="age >30 && age <60">中年</p>
  <p v-if="age>60">老年</p>

  <hr>
  <p v-if="age<18"> 青少年</p>
  <p v-else-if="age>19 &&age <30">青年</p>
  <p v-else-if="age>30 &&age <60">中年</p>
  <p v-else>老年</p>
</div>

<script>
  new Vue({
    el:"#app",
    data:{
      sun:false,
      age: 61,
    }
  });
</script>
</body>
</html>